<%@page import="com.augmentum.oes.model.Question"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" pageEncoding="UTF-8"%>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="java.util.List" %>
<%@ page import="com.augmentum.oes.model.User" %>
<%@ page import="com.augmentum.oes.Constants" %>
<%@ page import="com.augmentum.oes.util.PropertyUtil" %>
<%@ page import="com.augmentum.oes.util.PathUtil" %>
<%@ page import="com.augmentum.oes.util.StringUtil" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">   
    <title>Login</title>
    <link rel="stylesheet" href="<%=PropertyUtil.getStaticPath() %>/static/css/main.css?timeStamp="<%=Math.random()%>type="text/css" />
    <link rel="stylesheet" href="<%=PropertyUtil.getStaticPath() %>/static/css/question.css?timeStamp="<%=Math.random()%> type="text/css" />
    <link rel="stylesheet" href="<%=PropertyUtil.getStaticPath() %>/static/css/exam.css?timeStamp="<%=Math.random()%> type="text/css" />
    <link rel="stylesheet" href="<%=PropertyUtil.getStaticPath() %>/static/css/examtable.css?timeStamp="<%=Math.random()%> type="text/css" />
    <link rel="stylesheet" href="<%=PropertyUtil.getStaticPath() %>/static/css/dialog.css?timeStamp="<%=Math.random()%> type="text/css" />
    <script src="<%=PropertyUtil.getStaticPath() %>/static/js/jquery-1.10.2.min.js"></script>
    <script src="<%=PropertyUtil.getStaticPath() %>/static/js/dialog.js?timeStamp="<%=Math.random()%>></script>
    <script src="<%=PropertyUtil.getStaticPath() %>/static/js/question.js"/></script>
    <script src="<%=PropertyUtil.getStaticPath() %>/static/js/exam.js" /></script>
    <script src="<%=PropertyUtil.getStaticPath() %>/static/js/dialog.js" /></script>
    
  </head>
  <body>
    <div class="header">
    <div class="logo-icon">
    </div>
    <div class="head-title">
        Online Exam System
    </div>
    <div class="user-logout">
        <div class="language">
            中文
        </div>
        <div class="person-info-outdiv">
            <div onclick="javascript:window.location.href='<%=PathUtil.getFullPath("userdetail.action")%>'" class="person-info-inner float-left">
            <div class="person-info-inner"><img src="<%=PropertyUtil.getStaticPath() %>/static/images/ICN_Web_PersonalInformation_20x20.png" class="person-info-currentPage" /></div>
            <span >${USER.userName}</span></div>
            <div class="logout1" onclick="javascript:window.location.href='../static/logout.jsp'">Logout</div>
            
        </div>
    </div>
    </div>
    <div class="tab-panel">
    <div class="question-manage " onclick="toQuestionList();">
        Question Management
    </div>
    <div class="exam1-manage active"  onclick="toExamList();">
        Exam Management
    </div>
    </div>
    <div class="content-panel content-panel-no-breadcrumb">
    <div class="list-panel">
        <div class="menu-list-outdiv margin-top-50">
            <ul class="menu-list">
                <li class="list-over" onclick="toExamList();">Exam List</li>
                <li onmouseout="this.className='list-out'" onmouseover="this.className='list-over'" onclick="toCreateExam();">Create Exam</li>
            </ul>
        </div>
    </div>
    <c:if test="${!empty TIP_MESSAGE}">
                <script>
                  $(function(){
                      modalDialogShow('${TIP_MESSAGE}');
                   });
                </script>
    </c:if>
    <c:if test="${!empty errorMessage}">
                <script>
                  $(function(){
                      modalDialogShow('${errorMessage}');
                   });
                </script>
    </c:if>
    <div class="list-content-panel">
    <div class="search-panel" style="float:left;">
        <div class="outdiv search-icon cursor" >
        <input type="text" class="input" 
        value="<c:if test="${!empty examKeyWord}"><%=StringUtil.htmlEncode((String)session.getAttribute("examKeyWord")) %></c:if>" 
        name="search" id="search" placeholder="Please input the keyword"/>
        <div id="searchButton" onclick="searchExam('${pagnation.currentPage}','${sortstatus}','${pagnation.pageSize }','${sortfield }');" class="search-icon-div"></div>
        <input type="hidden" value="${pagnation.currentPage}" id="currentPageHidden">
        <input type="hidden" value="${sortstatus}" id="sortstatusHidden">
        <input type="hidden" value="${pagnation.pageSize }" id="pageSizeHidden">
        </div>
    </div>
    <div class="search-panel" >
        <div class="outdiv search-icon cursor" style="width:255px;background-position: 255px 5px;" >
            <div style="float:left;"><input type="date" id="start" style="width:120px;border:none;outline:none;"/></div>
            -
            <div style="float:right;"><input type="date" id="end" style="width:120px;border:none;outline:none;"/></div>
         <div style="width: 25px;float: right;margin-top: -30px;margin-right: -20px;height: 29px;" class="cursor" onclick="searchByTime();"></div>
        </div>
       
    </div>
    <div class="list-content">
      <form action="<%=PathUtil.getFullPath("deleteexam.action")%>" method="POST" id="deleteForm">
        <div>
           <div class="head">
                <div class="head-div">
                  <div  class="cursor" onmouseover="this.className='change-color cursor'" onmouseout="this.className='cursor'" 
                 <c:if test="${sortfield eq 'ID' && examSortstatus eq 'ASC' }"> onclick="examSort('DESC','${examKeyWord }','${examPagnation.pageSize }','ID');"</c:if>
                 <c:if test="${sortfield eq 'ID' && examSortstatus eq 'DESC' }"> onclick="examSort('ASC','${examKeyWord }','${examPagnation.pageSize }','ID');"</c:if>
                 <c:if test="${!(sortfield eq 'ID' ) }"> onclick="examSort('ASC','${examKeyWord }','${examPagnation.pageSize }','ID');"</c:if>
                  >
                    <input type="hidden" id="status" value="${idsortstatus}" /> 
                    ID<c:if test="${sortfield eq 'ID' or empty sortfield}">
                     <c:if test="${(examSortstatus eq 'ASC')}"><img id="sort" src="<%=PropertyUtil.getStaticPath()%>/static/images/ICN_Decrese_10x15.png.png"/></c:if>
                     <c:if test="${examSortstatus eq 'DESC'}"><img id="sort" src="<%=PropertyUtil.getStaticPath()%>/static/images/ICN_Increase_10x15.png.png"/></c:if>
                    </c:if>
                  </div>
                </div>
                <div class="head-div" >
                  <div  class="cursor" onmouseover="this.className='change-color cursor'" onmouseout="this.className='cursor'" 
                      <c:if test="${sortfield eq 'EXAM_NAME' && examSortstatus eq 'ASC' }"> onclick="examSort('DESC','${examKeyWord }','${examPagnation.pageSize }','EXAM_NAME');"</c:if>
                      <c:if test="${sortfield eq 'EXAM_NAME' && examSortstatus eq 'DESC' }"> onclick="examSort('ASC','${examKeyWord }','${examPagnation.pageSize }','EXAM_NAME');"</c:if>
                      <c:if test="${!(sortfield eq 'EXAM_NAME' ) }"> onclick="examSort('ASC','${examKeyWord }','${examPagnation.pageSize }','EXAM_NAME');"</c:if>
                  
                  >
                    <input type="hidden" id="status" value="${namesortstatus}" /> 
                      Name<c:if test="${sortfield eq 'EXAM_NAME'}">
                        <c:if test="${examSortstatus eq 'ASC'}"><img id="sort" src="<%=PropertyUtil.getStaticPath()%>/static/images/ICN_Decrese_10x15.png.png"/></c:if>
                     <c:if test="${examSortstatus eq 'DESC'}"><img id="sort" src="<%=PropertyUtil.getStaticPath()%>/static/images/ICN_Increase_10x15.png.png"/></c:if>
                      </c:if>
                    </div>
                 </div>
                 <div class="head-div">
                 <div class="cursor" onmouseover="this.className='change-color cursor'" onmouseout="this.className='cursor'" 
                	 <c:if test="${sortfield eq 'EFFECTIVE_TIME' && examSortstatus eq 'ASC' }"> onclick="examSort('DESC','${examKeyWord }','${examPagnation.pageSize }','EFFECTIVE_TIME');"</c:if>
                     <c:if test="${sortfield eq 'EFFECTIVE_TIME' && examSortstatus eq 'DESC' }"> onclick="examSort('ASC','${examKeyWord }','${examPagnation.pageSize }','EFFECTIVE_TIME');"</c:if>
                     <c:if test="${!(sortfield eq 'EFFECTIVE_TIME' ) }"> onclick="examSort('ASC','${examKeyWord }','${examPagnation.pageSize }','EFFECTIVE_TIME');"</c:if>
                 >
                   <input type="hidden" id="status" value="${timesortstatus}" /> 
                     Effective Time<c:if test="${sortfield eq 'EFFECTIVE_TIME'}">
                     <c:if test="${examSortstatus eq 'ASC'}"><img id="sort" src="<%=PropertyUtil.getStaticPath()%>/static/images/ICN_Decrese_10x15.png.png"/></c:if>
                     <c:if test="${examSortstatus eq 'DESC'}"><img id="sort" src="<%=PropertyUtil.getStaticPath()%>/static/images/ICN_Increase_10x15.png.png"/></c:if>
                     </c:if>
                 </div>
                 </div>
                 <div class="head-div">
                 Duration
                </div>
                 <div class="head-div">
                 Creator
                </div>
                <div class="head-div">
                 Edit
                </div>
                <div class="sel-div">
                  <img onclick="changeimg_all(this,'<%=PropertyUtil.getStaticPath() %>');" id="deleteImg" src="<%=PropertyUtil.getStaticPath()%>/static/images/ICN_Unselected_15x15.png  .png" />
                </div>
            </div>
            
              <c:if test="${empty question_view_list}">
                <script>
                  $(function(){modalDialogShow("Don't hava any data!");});
                </script>
              </c:if>
              <div style="overflow: auto;height: 300px;">
              <c:forEach var="row" items="${exam_view_list}" varStatus="status">
              <div class="div-body cursor <c:if test='${row.draft}'>disabled-tr</c:if>" <c:if test='${row.draft}'>title="The exam is a draft!"</c:if> onmouseover="this.className='div-body change-background-over cursor <c:if test="${row.draft}">disabled-tr</c:if>'" onmouseout="this.className='div-body change-background-out cursor <c:if test='${row.draft}'>disabled-tr</c:if>'">
                <div class="td1">
                   ${(examPagnation.currentPage-1)*examPagnation.pageSize+status.index+1} <%-- ${status.index+1 } --%>
                </div>
                <div class="td2">
                  EX00${row.id }
                </div>
                <div class="td-name" >
                  <a  <c:if test="${!row.draft}">style=""</c:if> onclick="examContentDialog('${row.id}','<%=PathUtil.getFullPath("") %>');" <%-- onclick="viewExamDetail(${row.id});" --%>>${row.examName }</a>
                </div>
                <div class="td-time">
                  ${row.effectiveTime}
                </div>
                <div class="td-duration">
                  ${row.duration }
                </div>
                <div class="td-creator" >
                   ${row.creator.userName }
                </div>
                <div class="td4 " >
                  <div class="cursor" onclick="toEditExam('${row.id}')" > <img alt="alt" src="<%=PropertyUtil.getStaticPath() %>/static/images/ICN_Edit_15x15.png.png" /></div>
                </div>
                
                <div class="td5">
                  <input type="checkbox" value="${row.id}" id="checkboxOneInput${row.id }" name="checkboxOneInput" />
                  <label for="checkboxOneInput${row.id }" class='cursor' ><img id="delete_all_img"  name="delete_all_img" onclick="changeimg(this,'<%=PropertyUtil.getStaticPath() %>');" src="<%=PropertyUtil.getStaticPath() %>/static/images/ICN_Unselected_15x15.png  .png" /></label>
                </div>
               </div>
             </c:forEach>
             </div>
         </div>
        </form>
               <div style="height:30px;bottom:10px;position: absolute;">
      <c:if test="${!empty examPagnation && examPagnation.pageCount>=0}">
        <div class="page-div" style="float:left;">
        <div class="page">
          
          <a class="cursor" <c:if test="${!(examPagnation.currentPage eq 1)}"> href="javascript:window.location.href='<%=PathUtil.getFullPath("toexamlist.action")%>?currentPage=${examPagnation.currentPage-1}&sort=${examSortstatus }&exampageSize=${examPagnation.pageSize}&keyWord=${examKeyWord}&sortfield=${sortfield}'"</c:if>>
            <img src="<%=PropertyUtil.getStaticPath() %>/static/images/BTN_PageLeft_20x15.png.png" />
          </a>
          <c:if test="${examPagnation.pageCount>5}">
           <c:if test="${(examPagnation.pageCount- examPagnation.currentPage)>=3}">
           <c:if test="${examPagnation.currentPage-1<1}">
             <a style="color:#FE9901;" href="<%=PathUtil.getFullPath("toexamlist.action")%>?currentPage=${examPagnation.currentPage}&sort=${examSortstatus }&exampageSize=${examPagnation.pageSize}&keyWord=${examKeyWord}&sortfield=${sortfield}">${examPagnation.currentPage}</a>
             <a href="<%=PathUtil.getFullPath("toexamlist.action")%>?currentPage=${examPagnation.currentPage+1}&sort=${examSortstatus }&exampageSize=${examPagnation.pageSize}&keyWord=${examKeyWord}&sortfield=${sortfield}">${examPagnation.currentPage+1}</a>
             <a href="<%=PathUtil.getFullPath("toexamlist.action")%>?currentPage=${examPagnation.currentPage+2}&sort=${examSortstatus }&exampageSize=${examPagnation.pageSize}&keyWord=${examKeyWord}&sortfield=${sortfield}">${examPagnation.currentPage+2}</a>
           </c:if>
           <c:if test="${examPagnation.currentPage-1>=1}">
             <a href="<%=PathUtil.getFullPath("toexamlist.action")%>?currentPage=${examPagnation.currentPage-1}&sort=${examSortstatus }&exampageSize=${examPagnation.pageSize}&keyWord=${examKeyWord}&sortfield=${sortfield}">${examPagnation.currentPage-1}</a>
             <a style="color:#FE9901;" href="<%=PathUtil.getFullPath("toexamlist.action")%>?currentPage=${examPagnation.currentPage}&sort=${examSortstatus }&exampageSize=${examPagnation.pageSize}&keyWord=${examKeyWord}&sortfield=${sortfield}">${examPagnation.currentPage}</a>
             <a href="<%=PathUtil.getFullPath("toexamlist.action")%>?currentPage=${examPagnation.currentPage+1}&sort=${examSortstatus }&exampageSize=${examPagnation.pageSize}&keyWord=${examKeyWord}&sortfield=${sortfield}">${examPagnation.currentPage+1}</a>
           </c:if>
           <a href="<%=PathUtil.getFullPath("toexamlist.action")%>?currentPage=${examPagnation.currentPage+3}&sort=${examSortstatus }&exampageSize=${examPagnation.pageSize}&keyWord=${examKeyWord}&sortfield=${sortfield}">...</a>
           <a href="<%=PathUtil.getFullPath("toexamlist.action")%>?currentPage=${examPagnation.pageCount}&sort=${examSortstatus }&exampageSize=${examPagnation.pageSize}&keyWord=${examKeyWord}&sortfield=${sortfield}">${examPagnation.pageCount}</a>
         </c:if>
         <c:if test="${(examPagnation.pageCount- examPagnation.currentPage)<3}">
           <a href="<%=PathUtil.getFullPath("toexamlist.action")%>?currentPage=1&sort=${examSortstatus }&exampageSize=${examPagnation.pageSize}&keyWord=${examKeyWord}&sortfield=${sortfield}">1</a>
           <a href="<%=PathUtil.getFullPath("toexamlist.action")%>?currentPage=${examPagnation.pageCount-3}&sort=${examSortstatus }&exampageSize=${examPagnation.pageSize}&keyWord=${examKeyWord}&sortfield=${sortfield}">...</a>
           <a <c:if test="${examPagnation.currentPage eq examPagnation.pageCount-2}">style="color:#FE9901;"</c:if> href="<%=PathUtil.getFullPath("toexamlist.action")%>?currentPage=${examPagnation.pageCount-2}&sort=${examSortstatus }&exampageSize=${examPagnation.pageSize}&keyWord=${examKeyWord}&sortfield=${sortfield}">
             ${examPagnation.pageCount-2}
           </a>
           <a <c:if test="${examPagnation.currentPage eq examPagnation.pageCount-1}">style="color:#FE9901;"</c:if> href="<%=PathUtil.getFullPath("toexamlist.action")%>?currentPage=${examPagnation.pageCount-1}&sort=${examSortstatus }&exampageSize=${examPagnation.pageSize}&keyWord=${examKeyWord}&sortfield=${sortfield}">
             ${examPagnation.pageCount-1}
           </a>
           <a <c:if test="${examPagnation.currentPage eq examPagnation.pageCount}">style="color:#FE9901;"</c:if> href="<%=PathUtil.getFullPath("toexamlist.action")%>?currentPage=${examPagnation.pageCount}&sort=${examSortstatus }&exampageSize=${examPagnation.pageSize}&keyWord=${examKeyWord}&sortfield=${sortfield}">
             ${examPagnation.pageCount}
           </a>
         </c:if>
         </c:if>
         <c:if test="${examPagnation.pageCount<=5 and examPagnation.pageCount>0}">
           <c:forEach begin="1" var="row" end="${examPagnation.pageCount}" >
             <a <c:if test="${examPagnation.currentPage eq row}">style="color:#FE9901;"</c:if> href="<%=PathUtil.getFullPath("toexamlist.action")%>?currentPage=${row}&sort=${examSortstatus }&exampageSize=${examPagnation.pageSize}&keyWord=${examKeyWord}&sortfield=${sortfield}">${row}</a>
           </c:forEach>
         </c:if>
        
             <a class="cursor"  <c:if test="${!(examPagnation.currentPage eq examPagnation.pageCount)}">href="javascript:window.location.href='<%=PathUtil.getFullPath("toexamlist.action")%>?currentPage=${examPagnation.currentPage+1}&sort=${examSortstatus }&exampageSize=${examPagnation.pageSize}&keyWord=${examKeyWord}&sortfield=${sortfield}'"</c:if>>
               <img src="<%=PropertyUtil.getStaticPath() %>/static/images/BTN_PageRight_20x15.png .png" />
             </a>
           <select name="pageSize" class="pageSizeSelect" id="pageSizeSelect" style="outline:none;" onchange="chageExampageSize('${examSortstatus }','${sortfield}','${examKeyWord}');">
             <option <c:if test="${ examPagnation.pageSize ==5 }">selected</c:if> >5</option>
             <option <c:if test="${ examPagnation.pageSize ==10}">selected</c:if> >10</option>  
             <option <c:if test="${ examPagnation.pageSize ==15}">selected</c:if> >15</option>  
             <option <c:if test="${ examPagnation.pageSize ==20}">selected</c:if> >20</option>  
           </select>Per&nbsp;&nbsp;page&nbsp;&nbsp;&nbsp;&nbsp;
             <input type="text" class="page-input" value="" id="pageNumber" name="currentPage"/>
             <button class="btn small-btn" onmouseout="this.className='btn small-btn'" onmouseover="this.className='btn-over small-btn'" onClick="toAnyExamPage('${examPagnation.pageSize}','${examSortstatus }');">GO</button>
           </div>
         </div>
        </c:if>
        <c:if test="${!empty examPagnation && examPagnation.pageCount>0}">
          <div class="div-button delete-button" style="margin-left: 250px;" onclick="confirmDialogShow('Are sure delete the selected options?');" onmouseout="this.className='div-button delete-button'" onmouseover="this.className='div-button-over delete-button'" >Delete</div>
        </c:if>
        </div>
    </div>
    </div>
    </div>
    <div class="footer">
    <p> Copyright © 2014 Augmentum, Inc.All Rights Reserved.</p>
    </div>
    <div class="modal-dialog" id="modalDialog">
      <div onclick="modalDialogHidden();" title="Close Dialog" class="modal-dialog-closebutton">
      </div>
      <div class="modal-dialog-msg" id="msgContent">
      </div>
      <div class="modal-dialog-btn-outdiv">
          <div class="modal-btn modal-dialog-btn-yes single-button" onclick="modalDialogHidden();">OK</div>
      </div>
    </div>
        <div class="modal-dialog" id="confirmDialog">
      <div onclick="confirmHidden();" title="Close Dialog" class="modal-dialog-closebutton">
      </div>
      <div class="modal-dialog-msg" id="confirmContent">
      </div>
    <div class="modal-dialog-btn-outdiv">
        <div class="modal-btn modal-dialog-btn-yes" onclick="examDelForm();">YES</div>
        <div class="modal-btn modal-dialog-btn-no" onclick="confirmHidden();">NO</div>
      </div>
    </div>
     <div class="modal-div" id="modalDiv">
    </div>
    <div class="exam-content-div" id="examContent">
     <div style="position:fixed;width:1250px;height:30px;">
     <div onclick="contentDialogHidden();" title="Close Dialog"  class="modal-dialog-closebutton"></div>
     </div>
      <div style="width:1250px;margin:50px auto;height:75%;" id="contentJson"></div>
    </div>
     <script>
     $(function(){
         $("div[name='queContent']").each(function(){
         if ($(this).text().length > 20) {
             contentStr = $(this).text();
             contentStr = "<%=StringUtil.htmlEncode((String)request.getAttribute("questionContent"))%>";
             contentStr = contentStr.substring(0,15);
             contentStr = contentStr+"...";
             $(this).html( contentStr );
         }
        });   
        var uppath = " <%=PropertyUtil.getStaticPath() %>/static/images/ICN_Decrese_10x15.png.png";
        var downpath = " <%=PropertyUtil.getStaticPath() %>/static/images/ICN_Increase_10x15.png.png";
        var imgObj = document.getElementById("sort");
        var status = $("#status").val();
        if (status == 'DESC') {
            imgObj.src = downpath;
        } else {
            imgObj.src = uppath;
        }
    });
    </script> 
  </body>
</html>